<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务进展</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
      h3{
        font-size: 15px;
      }
          #notice-1 {
              color: #fff;
              display: inline-block;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              border: 1px solid red;
              text-align: center;
              line-height: 20px;
              background-color: red;

          }
      </style>
</head>

<body>
  <div class="aui-searchbar" id="search">
    <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="请输入搜索内容" id="search-input">
        </form>
    </div>
    <div class="aui-searchbar-cancel" tapmod>取消</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="./conf/config.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    apiready = function() {

        var header = $api.byId('header'); //获取header元素
        var nav = $api.byId('nav-1'); //获取header元素
        var nav2 = $api.byId('nav-2'); //获取header元素
        var footer = $api.byId('footer'); //获取header元素
        headerH = $api.offset(header).h; //计算头部的高
        navH = $api.offset(nav).h; //计算导航栏的高
        navH2 = $api.offset(nav2).h; //计算导航栏的高
        footerH = $api.offset(footer).h; //计算头部的高
        menus = $api.domAll(nav, '.menu');
        initEventListenner(); //退出键添加提示框
        //fnOpenFrame();
        fnOpenFrameGroup();
        fnAddClick(); //底部导航栏

    };

    function fnOpenFrameGroup() {
        var frames = [];
        //把一个对象，添加到一个数组中
        for (var i = 0; i < menus.length; i++) {
            frames.push({
                name: 'task_ing_frame_' + i,
                url: 'task_ing_frame_' + i + '.html',
                pageParam: {
                    taskIngTypeIndex: i
                }
            });

        }


        api.openFrameGroup({
            name: 'taskIngFrameGroup',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH + navH + navH2,
                w: 'auto', //高度宽度，就是拉伸到屏幕右下角
                h: api.winHeight - footerH - headerH - navH - navH2,
            },
            index: 0,
            frames: frames
        }, function(ret, err) {
            fnSetNavMenuSelected(ret.index);
        });


    }

    function fnSetNavMenuSelected(index_) {
        for (var i = 0; i < menus.length; i++) {
            if (index_ == i) {
                $api.addCls(menus[i], 'aui-active');
            } else {
                $api.removeCls(menus[i], 'aui-active');
            }
        }
    }

    function fnAddClick() {

        $("#footer .footer-tab").each(function() {
            $(this).click(function() {
                var name = $(this).attr("data-name");
                var url = $(this).attr("data-url");
                api.openWin({
                    name: name,
                    url: url,
                    opaque: true,
                    vScrollBarEnabled: false

                });
            });
        });

    }

    function fnOpenFrame() {
        var header = $api.byId('header');
        var headerH = $api.offset(header).h;
        var nav = $api.byId('nav-1');
        var navH = $api.offset(nav).h;
        var footer = $api.byId('footer');
        var footerH = $api.offset(footer).h;
        api.openFrameGroup({
            name: 'task_ing_group',
            rect: {
                x: 0,
                y: navH + headerH,
                w: 'auto',
                h: api.winHeight - footerH - navH - headerH
            },
            index: 2,
            frames: [{
                name: 'task_ing_frame_1',
                url: 'task_ing_frame_1.html',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_2',
                url: 'task_ing_frame_2',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_3',
                url: 'task_ing_frame_3.html',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_4',
                url: 'task_ing_frame_4.html',
                bgColor: '#fff'
            }, ]
        }, function(ret, err) {
            var index = ret.index;
        });
    }

    function fnSetNavMenuIndex(index) {

        fnSetNavMenuSelected(index);
        api.setFrameGroupIndex({
            name: 'taskIngFrameGroup',
            index: index,
            scroll: true
        });
    }

    function initEventListenner() {

        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
          api.closeWin();
        });
    };
</script>

</html>
